<script setup lang="ts">
import { ref } from 'vue'

const list = ref([
  { id: 1, name: '《红楼梦》', author: '曹雪芹' },
  { id: 2, name: '《西游记》', author: '吴承恩' },
  { id: 3, name: '《水浒传》', author: '施耐庵' },
  { id: 4, name: '《三国演义》', author: '罗贯中' }
])

const bookConfig = ref({
  id: 0,
  name: '',
  author: ''
})

const btnDelete = (id: number) => {
  list.value = list.value.filter(item => item.id != id)
}

const addBook = () => {
  bookConfig.value.id = Date.now()
  // list.value.push({ ...bookConfig.value })
  // 浅拷贝 合并两个对象
  list.value.push(Object.assign({}, bookConfig.value))


  bookConfig.value.id = 0
  bookConfig.value.name = ''
  bookConfig.value.author = ''
}
</script>
<template>
  <div id="app">
    <h3>黑马书架</h3>
    <input type="text" v-model="bookConfig.name" placeholder="请输入书名">
    <input type="text" v-model="bookConfig.author" placeholder="请输入作者">
    <button @click="addBook()">添加</button>
    <p>{{ bookConfig }}</p>
    <ol>
      <li v-for="item in list" :key="item.id">
        <span>{{ item.name }}</span>
        <span>{{ item.author }}</span>
        <button @click="btnDelete(item.id)">删除</button>
      </li>
    </ol>
  </div>
</template>